<template>
    <transition name="food">
        <div v-show="showFlag" id="food" ref="foodScroll">
            <div class="food-content">
                <div class="image-header">
                    <img :src="food.image" />
                    <div class="background" @click="hide">
                        <i class="icon-arrow_lift"></i>
                    </div>
                </div>
                <div class="content">
                    <div class="title">{{food.name}}</div>
                    <p v-if="food.description" class="desc">{{food.description}}</p>
                    <div class="details">
                        <span class="sell-count">月售{{food.sellCount}}份</span>
                        <span class="rating">好评率{{food.rating}}%</span>
                    </div>
                    <div class="money">
                        <span class="price">￥{{food.price}}</span>
                        <del v-if="food.oldPrice" class="old-price">￥{{food.oldPrice}}</del>
                    </div>
                    <div class="cartcontrol-wrapper">
                        <ry-cart-control :food="food" @cartAdd="cartAdd($event)"></ry-cart-control>
                    </div>
                    <transition name="fade">
                        <div v-if="!food.count" class="buy" @click="setCart">加入购物车</div>
                    </transition>
                </div>
                <ry-split v-if="food.info"></ry-split>
                <div v-if="food.info" class="info">
                    <h1 class="title">商品介绍</h1>
                    <p class="text">{{food.info}}</p>
                </div>
                <ry-split></ry-split>
                <div class="rating">
                    <h1 class="title">商品评价</h1>
                    <ry-rating-select :ratings.sync="food.ratings" :selectType.sync="selectType" :onlyContent.sync="onlyContent" :desc.sync="desc"></ry-rating-select>
                    <div class="rating-wrapper">
                        <ul v-if="food.ratings" class="rating-list">
                            <li v-show="needShow(item.rateType, item.text)" v-for="item in food.ratings" class="rating-item border-1px">
                                <div class="time">{{item.rateTime|formatDate}}</div>
                                <div class="user">
                                    <span class="username">{{item.username}}</span>
                                    <img class="avatar" :src="item.avatar" />
                                </div>
                                <p class="text">
                                    <span :class="{'icon-thumb_up': item.rateType === 0, 'icon-thumb_down': item.rateType === 1}"></span>
                                    {{item.text}}
                                </p>
                            </li>
                        </ul>
                        <div v-if="!food.ratings || !food.ratings.length" class="no-rating">暂无评价</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import Vue from 'vue'
    import Bscroll from 'better-scroll'
    import RyCartControl from './../cartcontrol/Cartcontrol'
    import RySplit from './../split/Split'
    import RyRatingSelect from './../ratingselect/Ratingselect'
    import {formatDate} from './../../common/js/date.js'

    const POSITIVE = 0;
    const NEGATIVE = 1;
    const ALL = 2;

    export default {
        name: 'Food',
        props: ['food'],
        components: {
            RyCartControl,
            RySplit,
            RyRatingSelect
        },
        data() {
            return {
                showFlag: false,
                selectType: ALL,
                onlyContent: true,
                desc: {all: '全部', positive: '推荐', negative: '吐槽'}
            }
        },
        methods: {
            show() {
                this.selectType = ALL;
                this.onlyContent = false;
                this.showFlag = true;
                this.$nextTick(() => {
                    this.scroll ? this.scroll.refresh() : this.scroll = new Bscroll(this.$refs.foodScroll, {
                        click: true
                    });
                })
            },
            hide() {
                this.showFlag = false;
            },
            setCart(event) {
                setTimeout(() => {
                    Vue.set(this.food, 'count', 1);
                    this.$emit('cartAdd', event.target);
                }, 100)
            },
            cartAdd(target) {
                this.$parent.cartAdd(target);
            },
            needShow(type, text) {
                if (this.onlyContent && !text) return false;
                if (this.selectType === ALL) {
                    return true;
                } else {
                    return type === this.selectType;
                }
                this.$nextTick(() => {
                    this.scroll.refresh();
                })
            }
        },
        filters: {
            formatDate(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }
    }
</script>

<style scoped>
    img {
        object-fit: cover;
    }

    #food {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 48px;
        width: 100%;
        z-index: 2;
        background-color: #fff;
    }

    .food-enter-active,
    .food-leave-active {
        transition: .5s ease;
    }
    
    .food-enter,
    .food-leave-to {
        transform: translateX(100%);
    }

    .image-header {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
    }

    .image-header img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .background {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .icon-arrow_lift {
        display: block;
        font-size: 20px;
        color: #fff;
    }

    .content {
        padding: 18px;
        position: relative;
    }

    .content .title {
        line-height: 14px;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 700;
        color: rgb(7, 17, 27);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desc {
        font-size: 10px;
        color: rgb(147, 153, 159);
        line-height: 12px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .details {
        margin: 8px 0 18px;
        line-height: 10px;
        font-size: 0;
    }

    .sell-count, 
    .details .rating {
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .sell-count {
        margin-right: 12px;
    }

    .price {
        font-size: 14px;
        color: rgb(240, 20, 20);
        font-weight: 700;
        line-height: 24px;
    }

    .old-price {
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .cartcontrol-wrapper,
    .buy {
        position: absolute;
        right: 18px;
        bottom: 18px;
    }

    .cartcontrol-wrapper {
        z-index: 1;
    }

    .buy {
        height: 48px;
        line-height: 48px;
        padding: 0 24px;
        box-sizing: border-box;
        font-size: 20px;
        color: #fff;
        border-radius: 24px;
        background-color: rgb(0, 160, 220);
        z-index: 2;
        transform: scale(.5) translate(50%, 50%);
    }

    .info {
        padding: 18px;
    }

    .info .title, 
    .rating .title {
        line-height: 14px;
        margin-bottom: 6px;
        font-size: 14px;
        color: rgb(7, 17, 27);
    }

    .info .text {
        line-height: 24px;
        padding: 0 8px;
        font-size: 12px;
        color: rgb(77, 85, 93);
    }

    .rating {
        padding-top: 18px; 
    }

    .rating .title {
        margin-left: 18px;
    }

    .rating-wrapper {
        padding: 0 18px;
    }

    .rating-item {
        position: relative;
        padding: 16px 0;
    }

    .rating-item::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .user, 
    .time {
        display: inline-block;
        color: rgb(147, 153, 159);
    }

    .time {
        margin-bottom: 6px;
        line-height: 12px;
        font-size: 10px;
    }

    .user {
        margin-right: 6px;
        vertical-align: top;
        font-size: 10px;
        float: right;
    }

    .avatar {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .rating-item .text {
        line-height: 16px;
        font-size: 12px;
        color: rgb(7, 17, 27);
    }

    .icon-thumb_up, 
    .icon-thumb_down {
        margin-right: 4px;
        line-height: 24px;
        font-size: 12px;
    }

    .icon-thumb_up {
        color: rgb(0, 160, 220);
    }

    .icon-thumb_down {
        color: rgb(147, 153, 159);
    }

    .no-rating {
        padding: 16px 0;
        font-size: 12px;
        color: rgb(147, 153, 159);
    }
</style>